<template>
  <div class="noisy-container">
    <div class="header-top">
      <div class="noisy-header" @click="openall">
        <i class="el-icon-d-arrow-left"></i>所有通知
      </div>
    </div>
    <div class="noisy-medium">
      <div class="noisy-medium-left"><i class="el-icon-edit"></i>修改通知</div>
      <el-button type="primary" size="big" @click="tijiao">保存</el-button>
    </div>
    <div class="noisy-footer">
      <el-form
        ref="form"
        :model="form"
        class="footer-form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item>
          <span slot="label">
            <span class="span-box">
              <i class="el-icon-star-on" style="color: red" />
              <span> 标题： </span>
            </span>
          </span>

          <el-input v-model="obj.title" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <span class="span-box">
              <span> 正文: </span>
            </span>
          </span>
          <el-input
            v-model="obj.message"
            clearable
            type="textarea"
            :autosize="{ minRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="附件:">
          <el-upload
            ref="upload"
            class="upload-demo demo1"
            action=""
            multiple
            :show-file-list="true"
            :file-list="fileList"
            :http-request="fileSubmit"
            :on-change="fileChange"
            :on-remove="fileRemove"
          >
            <div class="wrap">
              <span class="fujian"
                ><i class="el-icon-paperclip"></i>上传附件</span
              >
              <!-- <div slot="tip" class="el-upload__tip tip1">仅支持Excel文档</div> -->
            </div>
          </el-upload>
        </el-form-item>

        <div class="tips">
          <i class="el-icon-alarm-clock"></i
          ><span>历史附件删除即不可恢复,如需重新上传,请点击上传附件</span>
        </div>
        <el-form-item v-if="filelistrecord.length > 0">
          <span slot="label">
            <span class="span-box">
              <span> 历史附件: </span>
            </span>
          </span>
          <ul>
            <li v-for="(item, index) in filelistrecord" :key="index">
              <span @click="querypdf(item)">{{ item }}</span>
              <span class="close" @click="closeli(item)"
                ><i class="el-icon-close"></i
              ></span>
            </li>
          </ul>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { edit } from "@/api/notice.js";
import { picHost } from "@/settings.js";
export default {
  data() {
    return {
      form: {},
      files: [],
      fileList: [],
      obj: this.$route.query,
      filelistrecord: [],
    };
  },
  mounted() {
    this.filelistrecord = this.obj.files.split(",").map((v) => {
      return v;
    });
  },
  methods: {
    openall() {
      this.$router.push("/allnoisy");
    },
    querypdf(item) {
      window.open(picHost + item);
    },
    closeli(item) {
      this.filelistrecord.remove(item);
    },
    fileSubmit(data) {
      this.files.push(data.file);
    },

    fileRemove(file, fileList) {
      this.files = [];
    },
    fileChange() {},
    tijiao() {
      if (this.title == "") {
        this.$notify.error({
          title: "错误",
          message: "请输入标题",
        });
        return;
      }

      let data = new FormData();
      data.append("id", this.obj.id);
      data.append("title", this.obj.title);
      data.append("createUserName", this.obj.createUserName);
      data.append("depName", this.obj.depName);
      data.append("message", this.obj.message);
      this.files.forEach((element) => {
        data.append("upFiles", element);
      });
      let str = this.filelistrecord.toString();
      data.append("files", str);
      edit(data)
        .then((res) => {
          if (res.success) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            (this.obj.title = ""), (this.obj.message = "");
            this.fileList = [];
            this.files = [];
            this.filelistrecord = []
          } else {
            this.$notify.error({
              title: "修改失败",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$notify.error({
            title: "失败",
            message: "服务忙，请稍后再试",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tips {
  font-size: 14px;
  color: sandybrown;
  margin-bottom: 15px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    color: #4778c7;
    &:hover {
      color: red;
    }
    .close {
      margin-left: 30px;
      color: seagreen;
    }
  }
}
.noisy-container {
  background-color: #f5f5f5;
  position: relative;
  .header-top {
    line-height: 35px;
    border-bottom: 3px solid #fff;
    .noisy-header {
      background-color: #fff;
      margin-left: 15px;
      width: 150px;
      font-size: 14px;
      font-weight: 400;
      padding-left: 5px;
      margin-top: 5px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      &:hover {
        color: #4778c7;
      }
      i {
        color: #4778c7;
      }
    }
  }
  .noisy-medium {
    background-color: #fff;
    margin: 15px;
    height: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    .noisy-medium-left {
      font-size: 28px;
      letter-spacing: 1px;
    }
  }
  .noisy-footer {
    background-color: #fff;
    margin: 15px;
    height: 746px;
    padding: 100px;

    .footer-form {
      width: 750px;
      height: 500px;
      margin: 0 auto;
      .fujian {
        font-size: 16px;
        font-weight: 600;
        color: #4778c7;
      }
    }
  }
}
</style>